<template>
  <x-dialog
    :title="`${formData.id ? '修改' : '添加'}收货地址`"
    v-model:visible="dialogVisible"
  >
    <template #body>
      <div class="xtx-form">
        <div class="xtx-form-item">
          <div class="label">收货人：</div>
          <div class="field">
            <input
              v-model="formData.receiver"
              class="input"
              placeholder="请输入收货人"
            />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">手机号：</div>
          <div class="field">
            <input
              v-model="formData.contact"
              class="input"
              placeholder="请输入手机号"
            />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">地区：</div>
          <div class="field">
            <city
              :fullLocation="formData.fullLocation"
              @change="changeCty"
              placeholder="请选择所在地区"
            />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">详细地址：</div>
          <div class="field">
            <input
              v-model="formData.address"
              class="input"
              placeholder="请输入详细地址"
            />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">邮政编码：</div>
          <div class="field">
            <input
              v-model="formData.postalCode"
              class="input"
              placeholder="请输入邮政编码"
            />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">地址标签：</div>
          <div class="field">
            <input
              v-model="formData.addressTags"
              class="input"
              placeholder="请输入地址标签，逗号分隔"
            />
          </div>
        </div></div
    ></template>
    <template v-slot:footer>
      <click-btn
        @click="dialogVisible = false"
        type="gray"
        style="margin-right: 20px"
        >取消</click-btn
      >
      <click-btn @click="submit" type="primary">确认</click-btn>
    </template>
  </x-dialog>
</template>
<script>
import { ref, reactive } from "vue";
import { addAddress, editAddress } from "api/order";
import Toast from "components/common/toast";
export default {
  name: "AddressEdit",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const dialogVisible = ref(false);
    // 打开函数
    const open = (address) => {
      dialogVisible.value = true;
      if (!address.id) {
        for (const key in formData) {
          if (key === "isDefault") {
            formData[key] = 1;
          } else {
            formData[key] = "";
          }
        }
      } else {
        for (const key in formData) {
          formData[key] = address[key];
        }
      }
    };

    //需要传递的值
    const formData = reactive({
      id: "",
      receiver: "",
      contact: "",
      provinceCode: "",
      cityCode: "",
      countyCode: "",
      address: "",
      postalCode: "",
      addressTags: "",
      isDefault: 1,
      fullLocation: "",
    });
    const changeCty = (data) => {
      formData.provinceCode = data.provinceCode;
      formData.cityCode = data.cityCode;
      formData.countyCode = data.areaCode;
      formData.fullLocation = data.fullLocation;
    };

    const submit = () => {
      if (formData.id) {
        //修改地址
        editAddress(formData).then((data) => {
          Toast({ type: "success", text: "修改地址成功" });
          dialogVisible.value = false;
          //自定义事件更新组件数据
          emit("onSuccess", formData);
        });
      } else {
        //添加地址
        //这里省略了校验
        addAddress(formData)
          .then((data) => {
            Toast({ type: "success", text: "添加地址成功" });
            formData.id = data.result.id;
            dialogVisible.value = false;
            //自定义事件更新组件数据
            emit("onSuccess", formData);
          })
          .catch((e) => {
            //一些细节补充，报错提醒
            Toast({ type: "error", text: e.response.data.message });
          });
      }
    };
    return { dialogVisible, open, formData, changeCty, submit };
  },
};
</script>
<style scoped lang="less">
.xtx-dialog {
  :deep(.wrapper) {
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.xtx-form {
  width: 400px;
  margin: 0 auto;
  .xtx-form-item {
    height: 70px;
    display: flex;
    line-height: 48px;
    justify-content: flex-end;
    .field {
      margin-left: 10px;
      input {
        border: 1px solid #d4d4d4;
        width: 320px;
        outline-color: @xtxColor;
        height: 50px;
        padding: 0 10px;
        &::placeholder {
          color: #ccc;
        }
      }
    }
  }
}
.xtx-city {
  width: 320px;
  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}
</style>